<template>
	<div class="middle">
		<div class="middlebg"></div>
		<el-tabs v-model="activeName" type="card" class="content">
			<el-tab-pane label="意见反馈" name="first">
        <el-form class="table">
          <div>
            <span>
              <span class="left">联系人</span>
              <span class="right">{{name}}</span>
            </span>
            <span>
              <span class="left phone">联系电话</span>
              <span class="right">{{phone}}</span>
            </span>
          </div>
          <div>
            <span class="left">类型</span>
            <template class="right">
              <el-radio v-model="radio" label="1">咨询</el-radio>
              <el-radio v-model="radio" label="2">建议</el-radio>
              <el-radio v-model="radio" label="3">功能异常</el-radio>
            </template>
          </div>
          <div>
            <span class="left">标题</span>
            <el-input class="input" v-model="title" placeholder="请输入内容"></el-input>
          </div>
          <div>
            <span>图片</span>
            <el-upload
              class="avatar-uploader"
              :action="url"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="baseUrl+imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="textarea">
            <span class="left">备注</span>
            <el-input class="area" v-model="textarea" type="textarea"></el-input>
          </div>
        </el-form>
        <div class="btn">
          <el-button type="primary" @click="feedbackInsert">保 存</el-button>
        </div>
			</el-tab-pane>
			<el-tab-pane label="查看" name="second">
				<el-table ref="singleTable" :data="feedbackLists" highlight-current-row style="width: 100%">
					<el-table-column property="title" label="标题"  width="300" align="center"></el-table-column>
					<el-table-column property="type" label="类型" width="180" align="center"></el-table-column>
					<el-table-column property="create_time" label="发布日期" width="180" align="center"></el-table-column>
					<el-table-column property="state" label="状态" width="180" align="center"></el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button @click="del(scope.row.id)" type="success" plain size="mini">删除</el-button>
							<el-button @click="watch(scope.row.id)" type="primary" plain size="mini">查看</el-button>
							<el-button @click="edit(scope.row.id)" :id="scope.row.id+a" type="primary" plain size="mini">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--分页功能-->
				<el-pagination
				   class="fenye"
				   @size-change="SizeChange"
				   @current-change="currentChange"
				   :current-page="page"
				   :page-sizes="pagesizes"
				   :page-size="rows"
				   layout="total, sizes, prev, pager, next, jumper"
				   :total="total"
				   >
				</el-pagination>
				<!-- 查看 -->
				<el-dialog class="record" title="查看反馈信息" :visible.sync="feedbackReply">
					<el-form class="table" v-model="replyContent">
						<div>
							<span class="left">标题</span>
							<span class="right">{{replyContent.title}}</span>
						</div>
						<div>
							<span class="left">描述</span>
							<span class="right">{{replyContent.contents}}</span>
						</div>
						<div class="imgs" v-if="replyContent.img == ''?false:true">
							<span class="left">图片</span>
							<div class="tipian">
								<img :src="replyContent.img" alt="">
							</div>

						</div>
						<div class="textarea">
							<span class="left" style="color:#00B02D">回复</span>
							<el-input class="area" type="text" v-model="replyContent.systemContet"></el-input>
						</div>
					</el-form>
				</el-dialog>
				<!-- 编辑-->
				<el-dialog class="record" title="查看反馈信息" :visible.sync="feedbackEdit">
					<el-form class="table" v-model="editFeedback">
						<div>
							<span>
								<span class="left">联系人</span>
								<span class="right">{{name}}</span>
							</span>
							<span>
								<span class="left phone">联系电话</span>
								<span class="right">{{phone}}</span>
							</span>
						</div>
						<div>
							<span class="left">类型</span>
							<template class="right">
								<el-radio v-model="editType" label="1">咨询</el-radio>
								<el-radio v-model="editType" label="2">建议</el-radio>
								<el-radio v-model="editType" label="3">功能异常</el-radio>
							</template>
						</div>
						<div>
							<span class="left">标题</span>
							<el-input class="input" v-model="editFeedback.title" placeholder="请输入内容"></el-input>
						</div>
						<div class="imgs">
							<span>图片</span>
							<el-upload
								class="avatar-uploader"
								:action="url2"
								:show-file-list="false"
								:on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="baseUrl+imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<img class="editImg" :src="editFeedback.img" alt="">
						</div>
						<div class="textarea">
							<span class="left">备注</span>
							<el-input class="area" v-model="editFeedback.contents" type="textarea"></el-input>
						</div>
					</el-form>
					<div class="btn">
						<el-button type="primary" @click="editPost">保 存</el-button>
					</div>
				</el-dialog>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				a:'_a',
				baseUrl:'http://pcprograme.tijian121.com/feedback/img/',
        url:'http://pcprograme.tijian121.com/api/common/upload_img',
        url2:'http://pcprograme.tijian121.com/api/common/upload_img',
				rule:'',
				activeName: 'first',
				imageUrl:'',
				name:'',
				phone:'',
				radio:'',
				title:'',
				textarea:'',
				//查看部分
				rows:10,//每页几条
				page:1,//当前显示页数
				pagesizes:[10,20,30,40,50],//更改每页显示条数
				total:20,//一共多少条,
				feedbackLists:[],
				feedbackReply:false,
				replyContent:[{
					contents:'',
					systemContet:'',
				}],
				feedbackEdit:false,
				editFeedback:[],
				editType:'',
				editId:'',
			}
		},
		methods:{
			handleAvatarSuccess(res, file) {
				this.imageUrl =res.img;
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isGIF = file.type === 'image/gif';
				const isPNG = file.type === 'image/png';
				const isBMP = file.type === 'image/bmp';
				const isLt1M = file.size / 1024 / 1024 < 1;
				if (!isJPG && !isGIF && !isPNG && !isBMP) {
					this.$message.error('上传头像图片只能是 JPG/GPJ/JPEG/BMP 格式!');
				}
				if (!isLt1M) {
					this.$message.error('上传头像图片大小不能超过 1MB!');
				}
				return isJPG || isBMP || isGIF || isPNG && isLt1M;
			},
			personalInfo(){
				this.$http.post('/api/personal/personalInfo')
					.then(res=>{
						if(this.rule == 1){
							this.name = res.data.data.phone_name
							this.phone = res.data.data.phone
						}else if(this.rule == 2){
							this.name = res.data.data.teacher_name
							this.phone = res.data.data.teacher_phone
						}
					})
			},
			feedbackInsert(){
				this.$http.post('/api/feedback/feedbackInsert',{
					title:this.title,
					contents:this.textarea,
					type:this.radio,
					img:this.imageUrl
				}).then(res=>{
          if(res.data.code == 200) {
            this.$message({
              type:'success',
              message:res.data.msg
            })
          this.feedbackList()
          this.radio =''
          this.title =''
          this.textarea=''
          this.imageUrl =''
          }else if (res.data.errorCode == 400) {
            this.$message({
              type:'error',
              message:res.data.msg
            })
          }
				})
			},
			//反馈列表
			async feedbackList(){
				await this.$http.post('/api/feedback/feedbackList',{
					rows:this.rows,
					page:this.page
				}).then(res=>{
					this.total = res.data.count
					this.feedbackLists = res.data.data
				})
				this.feedbackLists.map(item=>{
					if(item.state == '已回复'){
						$('#'+item.id+this.a).css('visibility','hidden')
					}
				})
			},
			//每页显示条数
			SizeChange(val){
				this.rows = val
				this.feedbackList()
			},
			//切换第几页
			currentChange(val){
			  	this.page = val
			  	this.feedbackList()
			},
			//删除公告
			del(id){
				this.$confirm('是否永久删除, 是否继续?', '提示', {
			      confirmButtonText: '确定',
			      cancelButtonText: '取消',
			      type: 'warning'
			    }).then(() => {
			    	this.$http.post('/api/feedback/feedbackDelete', {
			    		id:id
			    	}).then(res=>{
			    		if(res.data.code == 200){
			        		this.$message({
					            type: 'success',
					            message: res.data.msg
					        });
							this.feedbackList()
			        	}else if(res.data.errorCode == 400){
			        		this.$message({
					            type: 'error',
					            message: res.data.msg
					        });
			    		}
			    	})
			    }).catch(() => {
			      this.$message({
			        type: 'info',
			        message: '已取消删除'
			      });
			    });
			},
			//查看信息
			watch(id){
				this.feedbackReply = true
				this.$http.post('/api/feedback/reply',{
					id,id
				}).then(res=>{
					this.replyContent = res.data.data
					if(this.replyContent.system_reply == null){
						this.replyContent.systemContet =''
					}else {
						this.replyContent.systemContet = res.data.data.system_reply.contents
					}
				})
			},
			//获取编辑信息
			edit(id){
				this.editId = id
				this.feedbackEdit = true
				this.$http.post('api/feedback/feedbackFind',{
					id:id
				}).then(res=>{
					this.editFeedback = res.data.data
					if(res.data.data.type == '咨询'){
						this.editType = '1'
					}else if(res.data.data.type == '建议') {
						this.editType = '2'
					}else if (res.data.data.type == '功能异常') {
						this.editType = '3'
					}
				})
			},
			editPost(){
				this.$http.post('api/feedback/feedbackUpdate',{
					id:this.editId,
					type:this.editType,
					title:this.editFeedback.title,
					contents:this.editFeedback.contents,
					img:this.imageUrl
				}).then(res=>{
					if(res.data.code == 200){
						this.$message({
					        type: 'success',
					        message: res.data.msg
					    });
						this.feedbackList()
						this.feedbackEdit = false
					}else if(res.data.errorCode == 400){
						this.$message({
					        type: 'error',
					        message: res.data.msg
					    });
					}
				})
			},
		},
		created(){
			this.personalInfo()
			this.feedbackList()
			//获取到身份
			this.rule = localStorage.getItem('rule')
		}
	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.v-modal {
		width: 0;
	}
	.content.el-tabs.el-tabs--card.el-tabs--top {
		padding: 0;
	}
</style>
<style lang="less" scoped>
	.middle {
		height: 98%;
	    width: 96%;
	    background:repeat center top;
	    background-size: contain;
	    padding-left: 2%;
	    padding-right: 2%;
	    padding-top: 1%;
		/deep/.content.el-tabs.el-tabs--card.el-tabs--top {
			background: #fff;
		}
		.middlebg {
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			background: url(../../assets/image/bg-img.png) no-repeat center;
			background-size: 100%;

		}
		.content {
			.fenye {
				margin-top: 20px;
				text-align: center;
				margin-bottom: 20px;
			}
			/deep/.el-tabs__content {
				padding: 0 20px;
			}
			/deep/.el-tabs__item.is-active {
				color: #00B02D;
			}
			.table{
				width: 600px;
				padding-left: 50px;
				div{
					height: 3.75rem;
					line-height: 3.75rem;
					border-bottom: 1px solid #ccc;
					.left {
						padding-right: 10px;
					}
					.phone {
						padding-left: 12.5rem;
					}
					.input {
						width: 500px;
						border-bottom: 0;
					}
					.avatar-uploader {
						border-bottom: 0;
						display: inline-block;
					}
					/deep/.avatar-uploader .el-upload {
						cursor: pointer;
						border-bottom: 0;
						padding-left: 20px;
					  }
					  .avatar-uploader .el-upload:hover {
						border-color: #409EFF;
					  }
					  .avatar-uploader-icon {
						font-size: 28px;
						color: #8c939d;
						width: 30px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						border: 1px dashed #d9d9d9;
					  }
					  .avatar {
						width: 30px;
						height: 30px;
						display: inline-block;
					  }
				}
				.textarea {
					height: 120px;
					margin-top: 20px;
					border-bottom: 0;
					.area {
						width: 500px;
						border-bottom: 0;
					}
				}
				/deep/textarea.el-textarea__inner {
					height: 100px;
				}
				.imgs {
					height: 140px;
					.tipian {
						width: 100px;
						height: 100px;
						border-bottom: 0;
						display: inline-block;
						vertical-align: text-top;
						img {
							width: 100px;
							height: 100px;
						}
					}
					.editImg {
						width: 70px;
						height: 70px;
						display: block;
						margin-left: 50px;
					}
				}

			}
			.btn {
				width: 200px;
				padding-left: 300px;
				padding-bottom: 20px;
			}

		}

	}
</style>
